<!-- 页面说明 -->
<template>
  <main>
    <div class="float-left my-left">
      <div class="text-center padding-20">
        <img class="width" src="/logo2.png"/>
      </div>
      <a-menu mode="inline" :items="contentGroups" theme="dark"
              @click="handleContentGroupClick">
      </a-menu>
    </div>
    <div class="float-right my-right">
      <!-- 页面内容 -->
      <header class="my-header">
        <a-row>
          <a-col :span="16" :offset="4">
            <a-row>
              <a-col :span="8">
                <!--                <img :height="60" src="/logo2.png" />-->
              </a-col>
              <a-col :span="16">
                <div class="menu-container">
                <span :class="item.selected?'my-menu-selected':'my-menu'"
                      @click="handleMenuClick(item)" v-for="item in menus">
                  {{ item.label }}
                </span>
                </div>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
      </header>

      <div class="my-content">
        <div class="font-size-24 bolder">{{ contentVO.title }}</div>
        <div class="my-preview">
          <MdPreview :editorId="'contentVO'+contentVO.id" :modelValue="contentVO.content" autoFoldThreshold="50"/>

        </div>
        <div class="text-right font-size-12">
          最后更新时间：{{ contentVO.updateTime ? contentVO.updateTime : contentVO.createTime }}
        </div>
      </div>

      <!--        <footer class="my-footer">-->
      <!--          <div>Copyright © 2023-2025 coder4j.com All Rights Reserved Keller</div>-->
      <!--          <div>京ICP备2023023545号</div>-->
      <!--        </footer>-->
    </div>
    <div class="my-catalog-div">
      <div class="my-catalog">
        <MdCatalog
            :editorId="'contentVO'+contentVO.id"
            :scrollElement="scrollElement"
        />
      </div>
    </div>
    <div class="clear"></div>
  </main>
</template>

<script setup lang="ts">
import {ref, onMounted} from 'vue';
import {useRouter} from 'vue-router';

const router = useRouter();

import {MenuProps} from 'ant-design-vue';
import {apiTree} from "@/api/SysDictApi"
import * as ApiUtil from "@/api/ApiUtils"
import {apiQueryListByType, apiGetDetail, SysContentVO} from "@/api/SysContentApi"
import {MdEditor, MdPreview, MdCatalog} from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';

const current = ref<string[]>(['mail']);
const menus = ref<MenuProps['items']>([
  {key: 'mail', label: '首页 ', selected: false, url: "/homeIndex"},
  {key: 'prodct', label: '项目介绍', selected: false, url: "/homeIndex"},
  {
    key: 'sub1', label: '在线文档', selected: true, url: "/homeDocument",
    children: [
      {label: '前端文档', key: 'setting:1'},
      {label: '后端文档', key: 'setting:2'},
    ],
  },
  {key: 'alipay', label: "在线演示", selected: false, url: "/login"},
]);

const scrollElement = document.documentElement;


// 数据定义
const contentVO = ref<SysContentVO>(new SysContentVO());

const handleContentGroupClick = (item) => {
  console.log(item.key);
  if (item.key) {
    apiGetDetail(item.key).then(res => {
      if (ApiUtil.isSuccessed(res)) {
        contentVO.value = res.data;
      }
    })
  }
}

const handleMenuClick = (item) => {
  let array = menus.value;
  for (let menu of array) {
    if (menu.key === item.key) {
      menu.selected = true;
    } else {
      menu.selected = false;
    }
  }
  menus.value = array;
  //包含ID,页面锚点跳转
  if (item.id) {
    // window.location.hash = '#'+item.id;
    const element = document.getElementById('productFunction');
    if (element) {
      element.scrollIntoView({behavior: 'smooth', block: 'start'});
    }
  }
  //包含Url，页面间跳转
  if (item.url) {
    router.push(item.url);
  }
}


const contentGroups = ref<any[]>([]);
// 挂载时的逻辑
onMounted(() => {

  apiQueryListByType("Document").then(res => {
    if (ApiUtil.isSuccessed(res)) {
      let data = res.data;
      contentGroups.value = data;
      console.log("==", data);

      if (data[0].children) {
        let key = data[0].children[0].key;
        handleContentGroupClick(data[0].children[0]);
      }

    }
  })

  // contentGroups.value = [
  //   {
  //     type: 'group', // Must have
  //     label: 'My Group',
  //     children: [
  //       {label:"adad",value:"sfasd"},
  //       {label:"adad",value:"sfasd"},
  //       {label:"adad",value:"sfasd"},
  //       {label:"adad",value:"sfasd"}
  //     ],
  //   },{
  //     type: 'group', // Must have
  //     label: 'My Group',
  //     children: [
  //       {label:"adad",value:"sfasd"},
  //       {label:"adad",value:"sfasd"},
  //       {label:"adad",value:"sfasd"},
  //       {label:"adad",value:"sfasd"}
  //     ],
  //   }
  // ]
});
</script>

<style scoped>
/* 样式定义 */
.my-header {
  background-color: rgba(0, 21, 41, 0.5);
  color: white;
  height: 60px;
  line-height: 60px;
  width: 100%; /* 宽度撑满屏幕 */

}

.my-menu {
  cursor: pointer;
  color: rgba(255, 255, 255, 0.65);
  font-size: 18px;
  line-height: 60px;
  padding: 0 20px;
}

.my-menu:hover {
  background-color: #1677aa;
  color: rgba(255, 255, 255, 0.80);
}

.my-menu-selected {
  cursor: pointer;
  font-size: 18px;
  line-height: 60px;
  padding: 0 20px;
  background-color: #1677FF;
  color: white;
}

.menu-container {
  display: flex;
  height: 60px;
  line-height: 60px;
  justify-content: flex-end; /* 水平居右 */
  align-items: center; /* 可选：垂直居中 */
}



.my-footer {
  padding-top: 20px;
  text-align: center;
  height: 60px;
  line-height: 20px;
  font-size: 12px;
  background-color: rgba(0, 21, 41, 0.95);
  color: rgba(255, 255, 255, 0.65);

}

.my-left {
  height: 100vh;
  background: #001529;
  position: fixed; /* 固定定位 */
  width: 15%; /* 宽度撑满屏幕 */
  left: 0; /* 距离顶部为0 */
  z-index: 1000; /* 确保层级足够高，不被其他元素遮挡 */
}

.my-right {
  width: 85%;
}

.my-content {
  padding: 20px;
  min-height: 80vh;
  //position: fixed; /* 固定定位 */
  left: 15%;
  width: 80%;
  height: 100vh;
}
.my-preview{
  overflow-y: auto;
}

.my-catalog{
  width: 10%;
  position: fixed; /* 固定定位 */
  left: 85%;
  top: 80px;
  z-index: 10000;
}
</style>
